<!-- 便利豆列表 -->
<template>
	<view class="BeansList">
		<view class="statistics f-background radius12 text-align">
			<view class="statistics-icon">
				<image class="width-height100" src="@/static/icons/blds.png" mode=""></image>
			</view>
			<view class="bean-por margin-bottom-16 font-weight-600 color3 price-font">{{userInfo.beanAmount || 0}}
			</view>
			<view class="font-weight-400 color3 size-32">便利豆余额(个)</view>
			<navigator url="/packagePerson/convenient-beans/expiring-soon" class="dis expire" hover-class="none"
				v-if="userInfo.expiredBeansCount">
				<text class="color font-weight-400 size-24">30天内有{{userInfo.expiredBeansCount}}个便利豆过期</text>
				<text class="iconfont icon-a-lujing4332biankuang size-18 color"></text>
			</navigator>
		</view>
		<view class="beans dis-cen f5-background">
			<picker :value="selectType" :range="allList" range-key="name" @change="onSelectType">
				<view class="dis-ali">
					<text class="font-weight-400 color3 size-30">{{allList[selectType].name}}</text>
					<text class="iconfont icon-xia size-20 color9 margin-left-12"></text>
				</view>
			</picker>
			<view class="dis-ali">
				<picker :value="params.dataBean.startTime" :range="allList" :end="datesFuture(0)" range-key="name" mode="date"
					@change="onSelectDate($event,'startTime')">
					<view class="dis-ali">
						<text class="font-weight-400 color3 size-30">{{params.dataBean.startTime}}</text>
						<text class="iconfont icon-xia size-20 color9 margin-left-12"></text>
					</view>
				</picker>
				<text class="to font-weight-400 color3 size-26">至</text>
				<picker :value="params.dataBean.endTime" :range="allList" :start="params.dataBean.startTime" :end="datesFuture(0)"
					range-key="name" mode="date" @change="onSelectDate($event,'endTime')">
					<view class="dis-ali">
						<text class="font-weight-400 color3 size-30">{{params.dataBean.endTime}}</text>
						<text class="iconfont icon-xia size-20 color9 margin-left-12"></text>
					</view>
				</picker>
			</view>
		</view>
		<mescroll-body @init="mescrollInit" @down="$event=>$event.resetUpScroll(false)"
			@up="$event=> postWalletRecordPage($event.num)" :toTop="{width: '100px',height: '100px'}"
			:down="{auto: false}" :up="{auto: false, textNoMore: '-已经到底啦-',empty:{use:false}}">
			<view class="beans-for f-background radius12 margin-bottom-16" v-for="(item,index) in list" :key="index">
				<view class="beans-title dis-cen">
					<text class="font-weight-600 color3 size-36">{{item.remarks}}</text>
					<text class="font-weight-600 size-40 price-font" :class="item.direction == 0?'colorf6':'#333333'">
						<text v-if="item.direction == 0">-</text>{{item.amount}}
					</text>
				</view>
				<view class="font-weight-400 color9 size-28 margin-bottom-16" v-if="item.orderNo">订单号：{{item.orderNo}}
				</view>
				<view class="font-weight-400 color9 size-28">{{item.createTime}}</view>
			</view>
			<view v-if="!list.length && !loading">
				<Default tisName="暂无便利豆数据！" />
			</view>
		</mescroll-body>
		<view class="inset-bottom"></view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { WalletRecordPage } from "@/api/index"
	import { datesFuture } from "@/utils/index"
	import Default from "@/components/default/default"
	import dayjs from 'dayjs';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { Default },
		data() {
			return {
				userInfo: {},
				loading: true,
				selectType: 0,
				list: [],
				allList: [
					{ name: '全部', type: 0 },
					{ name: '代取快递', type: 6 },
					{ name: '抵扣配送费', type: 7 },
					{ name: '过期回收', type: 8 },
					{ name: '首单奖励', type: 10 },
					{ name: '每日签到', type: 9 }
				],
				params: {
					size: 10, // 	每页显示条数
					current: 1, // 当前页
					dataBean: {
						walletType: 1, // 	钱包类型 1.便利豆 2.富友
						transType: 0, // 
						startTime: datesFuture(-30), // 开始时间
						endTime: datesFuture(0), // 结束时间
					}
				}
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.postWalletRecordPage()
		},
		methods: {
			datesFuture,
			// 列表数据
			async postWalletRecordPage(page) {
				// this.loading = true
				this.params.current = this.mescroll.num
				const { code, data } = await WalletRecordPage(this.params)
				const _this = this
				if (code == "200") {
					console.log('data', data)
					this.list = this.mescroll.num == 1 ? data.records : this.list.concat(data.records); //追加新数据
					setTimeout(() => {
						_this.loading = false
						_this.mescroll.endByPage(data.records.length, data.total); //必传参数(当前页的数据个数, 总页数)
					}, 500)
				}
			},
			// 选择日期
			onSelectDate(event, name) {
				const { params } = this
				const { value } = event.detail
				if (name == 'startTime' && this.unixData(value) > this.unixData(params.dataBean.endTime)) {
					uni.showToast({
						title: '请重新选择，当前选择的开始日期大于结束日期',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.params[name] = value
				this.mescroll.resetUpScroll();
			},
			onSelectType(e) {
				const { value } = e.detail
				this.params.dataBean.transType = this.allList[value].type
				this.selectType = value
				this.mescroll.resetUpScroll();
			},
			unixData(data) {
				return dayjs(data).unix()
			}
		}
	}
</script>

<style lang="scss">
	.BeansList {
		padding: 16rpx;

		.colorf6 {
			color: #F67700;
		}

		.to {
			margin: 0 20rpx;
		}

		.statistics {
			padding: 40rpx 0 38rpx;

			.icon-a-lujing4332biankuang {
				margin-left: 8rpx;
			}

			.statistics-icon {
				width: 104rpx;
				height: 104rpx;
				margin: 0 auto 24rpx;
			}

			.bean-por {
				font-size: 68rpx;
			}

			.expire {
				margin-top: 44rpx;
			}
		}

		.beans {
			padding: 40rpx 12rpx;
			position: sticky;
			z-index: 100;
			top: -6rpx;
		}

		.beans-for {
			padding: 32rpx 24rpx;

			.beans-title {
				margin-bottom: 28rpx;
			}
		}
	}
</style>